<template>
  <el-form :model="postData" status-icon show-message :rules="rules" ref="phoneFormRef" class="login-form">
    <div class="login-title">注册</div>
    <el-form-item prop="username">
      <el-input v-model="postData.username" style="width: 250px;" placeholder="账号" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input v-model="postData.phone" style="width: 250px;" placeholder="手机号码" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item prop="code" style="width: 250px;">
      <el-input v-model="postData.code" style="width: 165px" placeholder="短信验证码" autocomplete="off"></el-input>
      <el-button size="small" style="height: 32px;" @click="getCode">获取验证码</el-button>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input v-model="postData.password" type="password" style="width: 250px;" show-password placeholder="密码"
                autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item prop="phone">
      <el-input v-model="postData.confirmpassword" type="password" style="width: 250px;" show-password
                placeholder="确认密码"
                autocomplete="off"></el-input>
    </el-form-item>
    <div>
      <el-checkbox v-model="checked" label="我同意xxx隐私政策"/>
    </div>
    <el-form-item class="btn">
      <el-button type="primary" @click="">注册</el-button>
      <el-button @click="back">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import {reactive} from "vue";

let checked = reactive(true)
const postData = reactive({
  username: '',
  phone: '',
  code: '',
  password: '',
  confirmpassword: '',
  checked: ''
})
const validatePhone = (rule: any, value: any, callback: any) => {
  const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
  if (!reg.test(value)) {
    callback(new Error('请输入正确的手机号'))
  } else {
    callback()
  }
}
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (phoneFormRef.checkPass !== '') {
      if (!phoneFormRef.value) return
      phoneFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== phoneFormRef.pass) {
    callback(new Error("两次输入密码不一致！"))
  } else {
    callback()
  }
}
const rules = reactive({
  username: [{required: true, message: '请输入账号', trigger: 'blur'}],
  phone: [{validator: validatePhone, trigger: 'blur'}],
  code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
  password: [{validator: validatePass, trigger: 'blur'}, {min: 6, max: 8, message: '密码长度6到8', trigger: 'blur'}],
  confirmpassword: [{validator: validatePass2, trigger: 'blur'}, {min: 6, max: 8, message: '密码长度6到8', trigger: 'blur'}],
})
const emit = defineEmits(['on-click'])
const back = () => {
  emit('on-click', 0)
}
</script>

<style lang="scss" scoped>
.login-form {
  width: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;

  .login-title {
    margin-bottom: 20px;
  }
}
</style>
